<template>
    <div class="search-context">
        <div class="search-box">
            <div class="search-block" v-for="(item, index) in data.list" :key="index">
                <div class="search-title" v-if="item.name !== ''">{{ item.name }}</div>
                <div class="search-content">
                    <!-- 数字或文本输入框 -->
                    <template v-if="item.type === 'text' || item.type === 'number'">
                        <el-input
                            :style="{ width: item.width + 'px' }"
                            :type="item.type"
                            v-model="item.modelValue"
                            :placeholder="item.placeholder ? item.placeholder : '请输入' + item.name"
                            :clearable="item.clearable"
                            @input="item.change"
                        />
                    </template>
                    <!-- 下拉框 -->
                    <template v-else-if="item.type === 'select'">
                        <el-select
                            :style="{ width: item.width + 'px' }"
                            v-model="item.modelValue"
                            :placeholder="item.placeholder ? item.placeholder : '请选择' + item.name"
                            :clearable="item.clearable"
                            @change="item.change"
                        >
                            <el-option
                                v-for="itemOption in item.options"
                                :key="itemOption.value ? itemOption.value : itemOption.id"
                                :label="itemOption.label ? itemOption.label : item.name"
                                :value="itemOption.value ? itemOption.value : itemOption.id"
                            />
                        </el-select>
                    </template>
                    <!-- 时间选择器 -->
                    <template v-else-if="item.type === 'date'">
                        <el-config-provider :locale="locale">
                            <el-date-picker
                                :style="{ width: item.width + 'px' }"
                                v-model="item.modelValue"
                                type="date"
                                format="YYYY-MM-DD"
                                :value-format="item.timeFormat"
                                :placeholder="item.placeholder ? item.placeholder : '请选择' + item.name"
                                @change="item.change"
                            />
                        </el-config-provider>
                    </template>
                    <!-- 时间段选择器 -->
                    <template v-else-if="item.type === 'daterange'">
                        <el-config-provider :locale="locale">
                            <el-date-picker
                                style="width: 300px"
                                v-model="item.modelValue"
                                type="daterange"
                                range-separator="到"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                :value-format="item.timeFormat"
                                :locale="locale"
                                @change="item.change"
                                :disabled-date="limitDate"
                            />
                        </el-config-provider>
                    </template>
                    <!-- 月份选择器 -->
                    <template v-else-if="item.type === 'month'">
                        <el-date-picker
                            :style="{ width: item.width + 'px' }"
                            v-model="item.modelValue"
                            value-format="YYYY-MM"
                            type="month"
                            :placeholder="item.placeholder ? item.placeholder : '请选择' + item.name"
                        />
                    </template>
                    <!-- 开关选择器 -->
                    <template v-else-if="item.type === 'switch'">
                        <el-switch v-model="item.modelValue" />
                    </template>
                    <!-- slot -->
                    <template v-else-if="item.type === 'slot'">
                        <div :style="{ width: item.width + 'px' }"><slot name="custom"></slot></div>
                    </template>
                </div>
            </div>
            <div class="search-block btn">
                <el-button @click="onSearch" type="primary">
                    <!-- <el-icon class="el-icon--left"><Search /></el-icon> -->
                    搜索
                </el-button>
                <el-button @click="onReset">
                    <!-- <el-icon class="el-icon--left"><Refresh /></el-icon> -->
                    清空
                </el-button>
                <slot name="btn"></slot>
            </div>
        </div>
        <div class="add">
            <slot name="add"></slot>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { searchItemInterface, SearchData } from './index'

/**
 * 引入element-plus中文包
 */
const locale = ref(zhCn)

/**
 * 注册父组件回调方法
 */
const emits = defineEmits(['search', 'reset'])

/**
 * 接受来自父组件的传参
 */
const props = defineProps({
    list: {
        type: Array<searchItemInterface | string | string[]>,
        default: () => {
            return []
        }
    },
    resetKeys: {
        type: Array<searchItemInterface | string>,
        default: () => {
            return []
        }
    },
    permission: {
        type: Array<string>,
        default: () => {
            return []
        }
    }
})

/**
 * 初始化数据
 */
const data = reactive(new SearchData(props.list))

/**
 * 监听点击搜索按钮时
 */
const onSearch = () => {
    /**
     * 通过forEach检索出 传递的key及对应的modelValue，然后emits
     */
    const obj: any = {}
    data.list.forEach((item: searchItemInterface) => {
        obj[item.key] = item.modelValue
    })
    console.log('search', obj)
    emits('search', obj)
}

/**
 * 点击重置按钮时，设置所有的modelValue=''，然后emits
 */
const onReset = () => {
    data.list.forEach((item: searchItemInterface) => {
        item.modelValue = ''
    })
    emits('reset')
}
//限制只能选择今天之前(包括今天)
const limitDate = (time: Date) => {
    return time.getTime() > Date.now()
}
// //限制只能选择今天之前(不包括今天)
// const limitDate = (time: Date) => {
//     return time.getTime() > Date.now() - 8.64e7
// }
</script>
<style lang="scss" scoped>
.search-context {
    display: flex;
    justify-content: space-between;
}

.search-box {
    display: flex;
    flex-wrap: wrap;

    .search-block {
        display: flex;
        align-items: center;

        margin-bottom: 16px;

        .search-title {
            font-size: 14px;
            margin-right: 8px;
        }

        .search-content {
            margin: 0 16px 0 0px;
        }

        &.btn {
            margin-left: 8px;
        }
    }
}
.add {
    margin-bottom: 16px;
}
</style>
